<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center p-4">
    <div class="card w-full max-w-md bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="text-center mb-8">
          <div class="mx-auto w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
            </svg>
          </div>
          <h1 class="text-3xl font-bold text-gray-800 mb-2">LLM PC 系统</h1>
          <p class="text-gray-600">创建新账户</p>
        </div>

        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div class="form-control">
            <label class="label">
              <span class="label-text">用户名</span>
            </label>
            <input
              v-model="form.username"
              type="text"
              required
              class="input input-bordered"
              placeholder="请输入用户名"
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">邮箱</span>
            </label>
            <input
              v-model="form.email"
              type="email"
              required
              class="input input-bordered"
              placeholder="请输入邮箱地址"
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">密码</span>
            </label>
            <input
              v-model="form.password"
              type="password"
              required
              class="input input-bordered"
              placeholder="请输入密码"
            />
          </div>

          <div v-if="authStore.error" class="alert alert-error">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>{{ authStore.error }}</span>
          </div>

          <div class="form-control mt-6">
            <button
              type="submit"
              :disabled="authStore.isLoading"
              class="btn btn-primary w-full"
            >
              <span v-if="authStore.isLoading" class="flex items-center justify-center">
                <span class="loading loading-spinner loading-sm"></span>
                注册中...
              </span>
              <span v-else>注册</span>
            </button>
          </div>
        </form>

        <div class="text-center mt-6">
          <p class="text-gray-600">
            已有账户？
            <router-link to="/login" class="link link-primary">立即登录</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const authStore = useAuthStore();

const form = reactive({
  username: '',
  email: '',
  password: ''
});

const handleSubmit = async () => {
  const success = await authStore.register(form.username, form.email, form.password);
  if (success) {
    router.push('/');
  }
};
</script>